<template>
	<view class="detail-box-all">
		<myLoading></myLoading>
		<view class="search-box">
			<view class="Sarch">
				<image class="input-uni-icon" src="https://image.nanjingtouyang.com/touy/2024/02/21/5cdd5c1dcfec4f0bbb40d7204f3ea8b9.png" mode=""></image>
				<input confirm-type="search" v-model="searchText" class="nav-bar-input" type="text" placeholder="搜索经销商名称/编号"
					@input="confirm" />
			</view>
		</view>
		
		<view class="type-box">
			<view class="box-item" v-for="(item, index) in sportTypeList" :key="index" @click="chooseSportsType(item)">
				<view class="choose-box">
					<image v-if="item.parId == sportType" class="image-item" src="https://image.nanjingtouyang.com/touy/2023/11/202311091609162298.png" mode=""></image>
					<image v-else class="image-item" src="https://image.nanjingtouyang.com/touy/2023/11/2023110916153097444.png" mode=""></image>
				</view>
				<view class="type-box-item" >
					{{ item.parName }}
				</view>
			</view>
		
		</view>
		
		
		
		
	</view>
		
</template>

<script>
	import { getParList } from "@/api/public.js"
	export default {
		data(){
			return{
				searchText: '',
				sportTypeList: [],
				sportType: ''
			}
		},
		onLoad(option){
			this.getTypeKeys()
			
			if(uni.getStorageSync('shopChooseId')) {
				this.sportType = uni.getStorageSync('shopChooseId')
			}
			
		},
		methods:{
			getTypeKeys() {
				getParList({
					status: '02',
					exclContType: 12,
					parCodeName: this.searchText,
					pageSize: 100,
					pageNum: 1
				}).then(res => {
					this.sportTypeList = res.data.data
				})
			},
			chooseSportsType(item) {
				this.sportType = item.parId
				uni.setStorageSync('shopChooseId', item.parId)
				uni.setStorageSync('shopChooseName', item.parName)
				uni.navigateBack()
			},
			confirm() {
				this.getTypeKeys()
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}
	.detail-box-all {
		padding-bottom: 176rpx;
		box-sizing: border-box;
	}
	.search-box {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		.Sarch {
			border-radius: 100rpx;
			border: 2rpx solid #DCDCDC;
			display: flex;
			.input-uni-icon {
				width: 30rpx;
				height: 30rpx;
				margin-top: 20rpx;
				margin-left: 30rpx;
			}
			.nav-bar-input{
				padding: 15rpx 20rpx;
				border-radius: 100rpx;
			}
		}
	}
	.type-box {
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		.box-item {
			width: 100%;
			display: flex;
			margin-bottom: 30rpx;
			.choose-box {
				width: 40rpx;
				height: 40rpx;
				.image-item {
					width: 100%;
					height: 100%;
				}
			}
			
		}
		.type-box-item {
			height: 40rpx;
			font-size: 26rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
			margin-left: 20rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
		}
		
	}
	
	
</style>